<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:s="http://jboss.org/seam/faces" xmlns:c="http://java.sun.com/jsp/jstl/core"
      xml:lang="en" lang="en">

<ui:composition>
    <rich:popupPanel id="popupAddDebtor" modal="true" autosized="true">

        <f:facet name="header" >
            <h:outputText value="#{debtorAction.updateMode ? headerUpdateValue : headerValue}" id="addDebtorHeader"/>
        </f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="hidePopupAddDebtor();" >
                X
            </h:outputLink>
            <!--render="addNewDebtorForm"-->
            <a4j:jsFunction name="hidePopupAddDebtor"
                            action="#{debtorAction.resetDebtorModel}"
                            oncomplete="#{rich:component('popupAddDebtor')}.hide(); return false;"/>
        </f:facet>

        <div>
            <h:form id="addNewDebtorForm">
                <h:panelGroup id="addNewDebtorPanel">
                    <table>
                        <tr>
                            <td><div><h:outputText value="Фамилия:"/></div></td>
                            <td><div><h:inputText value="#{debtorModel.lastName}" /></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Имя:"/></div></td>
                            <td><div><h:inputText value="#{debtorModel.firstName}"/></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Отчество:" /></div></td>
                            <td><div><h:inputText value="#{debtorModel.middleName}" /></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="День рождения:"/></div></td>
                            <td><div>
                                <rich:calendar
                                        value="#{debtorModel.birthday}"
                                        enableManualInput="true"
                                        datePattern="dd.MM.yyyy"
                                        />
                            </div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Телефон:" /></div></td>
                            <td><div><h:inputText value="#{debtorModel.phone}" /></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Адрес регистрации:" /></div></td>
                            <td><div><h:inputText value="#{debtorModel.registerAddress}" /></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Фактический адрес:" /></div></td>
                            <td><div><h:inputText value="#{debtorModel.factAddress}" /></div></td>
                        </tr>
                        <tr>
                            <td><div><h:outputText value="Комментарий" /></div></td>
                            <td><div><h:inputText value="#{debtorModel.description}"/> </div></td>
                        </tr>
                        <tr>
                            <td>
                                <div><h:outputText value="Сведения о паспортах"/></div>
                            </td>
                            <td>
                                <div>
                                    <rich:panel styleClass="fake-app">
                                        <a4j:commandButton value=" "
                                                           render="addNewDebtorPanel"
                                                           action="#{debtorAction.addPassportToDebtor}"/>
                                        <rich:tooltip>
                                            <h:outputText value="Добавление паспорта"/>
                                        </rich:tooltip>
                                    </rich:panel>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <h:dataTable value="#{debtorModel.passportList}" var="passport" id="passportList">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Серия"/>
                                        </f:facet>
                                        <div>
                                            <rich:inplaceInput defaultLabel="номер..." value="#{passport.serial}" valueChangeListener="#{debtorAction.savePassport(passport)}" >
                                                <a4j:ajax event="change" />
                                            </rich:inplaceInput>
                                        </div>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Номер"/>
                                        </f:facet>
                                        <div>
                                            <rich:inplaceInput defaultLabel="серия..." value="#{passport.number}" valueChangeListener="#{debtorAction.savePassport(passport)}">
                                                <a4j:ajax event="change" />
                                            </rich:inplaceInput>
                                        </div>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Кем выдан"/>
                                        </f:facet>
                                        <div>
                                            <rich:inplaceInput defaultLabel="кем выдан..." value="#{passport.whoIssued}" valueChangeListener="#{debtorAction.savePassport(passport)}">
                                                <a4j:ajax event="change" />
                                            </rich:inplaceInput>
                                        </div>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Когда выдан"/>
                                        </f:facet>
                                        <div>
                                            <rich:calendar enableManualInput="true"
                                                           datePattern="dd.MM.yyyy"
                                                           value="#{passport.whenIssued}"
                                                           valueChangeListener="#{debtorAction.savePassport(passport)}">
                                                <a4j:ajax event="change" />
                                            </rich:calendar>
                                        </div>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Удалить"/>
                                        </f:facet>
                                        <div style="text-align: center;">
                                            <rich:panel styleClass="fake-app">
                                                <a4j:commandButton value=" "
                                                                   styleClass="delete-button"
                                                                   action="#{debtorAction.removePassportFromDebtor(passport)}"
                                                                   render="addNewDebtorPanel" />
                                                <rich:tooltip>
                                                    <h:outputText value="Удаление паспорта"/>
                                                </rich:tooltip>
                                            </rich:panel>
                                        </div>
                                    </h:column>
                                </h:dataTable>
                            </td>
                        </tr>

                        <tr>
                            <td><div>
                                <a4j:commandButton
                                        value="#{debtorAction.updateMode ? 'Изменить' : 'Добавить'}"
                                        render="#{rerenderList},addNewDebtorForm"
                                        oncomplete="if (#{!debtorAction.hasError}) {
                                                hidePopupAddDebtor();
                                            }"
                                        action="#{debtorAction.addOrUpdateDebtor}"
                                        />
                                <!--oncomplete="hidePopupAddDebtor();"-->

                            </div></td>
                        </tr>
                    </table>
                </h:panelGroup>
            </h:form>
        </div>
    </rich:popupPanel>
</ui:composition>

</html>